<template>
  <div class="qckc">
      <el-button type="primary" style="margin: 0px 0  20px 0; width: 100px; height: 40px" @click="fanhui">返回</el-button>


    <header>
      <div class="header-left">用户信息</div>
      <div class="header-right">
        <span class="span1">用户账号：18100000000</span>
        <span class="span1">用户姓名：xxxx</span>
        <span class="span1">押金总数：50.00 /元</span>
        <span>押桶总数：2 /桶</span>
      </div>
    </header>
    <div class="content">

        <el-table :data="tableData2" style="margin:0 0 30px 0">
        <el-table-column
          prop="date"
          label="地址"
          align="center"
          width="320"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="收货人"
          align="center"
          width="220"
        >
        </el-table-column>
        <el-table-column prop="address" align="center" label="联系电话 ">
        </el-table-column>
        <el-table-column prop="yajin" label="押金数 "  align="center">
        </el-table-column>
        <el-table-column prop="yatong" label="押桶数 "  align="center" >
        </el-table-column>
        <el-table-column prop="peichang" label="赔偿桶" width="100">

        </el-table-column>
      </el-table>
   
      <el-table :data="tableData">
        <el-table-column
          prop="date"
          label="收据类型"
          align="center"
          width="320"
          
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="收据编号"
          align="center"
          width="220"
        >
        </el-table-column>
        <el-table-column prop="address" align="center" label="押桶数 ">
        </el-table-column>
        <el-table-column prop="yajin" label="押金数 "  align="center">
        </el-table-column>
        <el-table-column prop="yatong" label="积分数 "  align="center" >
        </el-table-column>
        <el-table-column prop="time" label="时间" width="260">
          
        </el-table-column>
      </el-table>

      <div class="fenye">
        <el-pagination background layout="prev, pager, next" :total="100">

        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      tableData: [
        {
          date: "缴纳押金",
          name: "YXXXXXXXXX",
          address: "+ XX /桶",
          yajin: "+ XX.XX /元0",
          yatong: "",
          time:"2020-11-11 XX:XX:XX"
        },
        {
          date: "核销押金",
          name: "YXXXXXXXXX",
          address: "- XX /桶",
          yajin: "- XX.XX /元",
          yatong: "+ XXXX",
          time:"2020-11-11 XX:XX:XX"
        },
        {
          date: "核销押金",
          name: "YXXXXXXXXX",
          address: "- XX /桶",
          yajin: "- XX.XX /元",
          yatong: "+ XXXX",
          time:"2020-11-11 XX:XX:XX"
        },
      ],
      tableData2: [
        {
          date: "湖北省武汉市XXXXXXXXXXXXXX",
          name: "XXXX",
          address: "135XXXX",
          yajin: "20.00 /元",
          yatong: "1 /桶",
          peichang:"1 /桶"
        },

      ],
    };
  },
  methods: {
      fanhui(){
          this.$router.back()
      }
  },
};
</script>

<style lang="scss" scoped>
.qckc {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  overflow: hidden;


  header {
    width: 100%;
    height: 80px;
    margin-bottom: 20px;
    background-color: #fff;

    padding: 0 4%;
    .header-left {
      line-height: 40px;
      border-bottom: 1px solid #bbb;
    }
    .header-right {
      line-height: 40px;
      border-bottom: 1px solid #bbb;
      .span1 {
        margin-right: 100px;
      }
    }
  }
  .content {
    width: 100%;
    height: 500px;
    background-color: #fff;
    .p1 {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #bbb;
      padding: 0 4%;
    }

    .fenye {
      width: 100%;
      margin-top: 80px;
      .el-pagination,
      .is-background {
        float: right;
        margin-right: 4%;
      }
    }
  }
}
</style>